<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>总结生命周期</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <style>
            .demo{
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <!-- 常用的生命周期钩子
                1.mounted：发送Ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
                2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
            关于销毁Vue实例
                1.销毁后借助Vue开发中工具看不到任何信息
                2.销毁后自定义事件会失效，但原生DOM事件依然有效，比如下面的recover方法依然可以调用，但数据不会再变化了（23年之前版本会打印recover，之后的不再打印）
                3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

                 -->
        <div id="root">
            <h2 :style="{opacity}">点我创建input框</h2>
            <button @click="stop">点我停止变化</button>
            <button @click="recover">点我恢复到1</button>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //阻止生产提示
            const vm =  new Vue({
                el:'#root',
                data:{
                    opacity:1,
                    n:0
                },
                methods: {
                    stop(){
                        //第一种:停止定时器
                        //自己停定时器，但是下面的recover方法还能修改opacity值，因为Vue没有销毁
                        //clearInterval(this.timer)
                        //第二种停止定时器
                        //模拟离开页面要清除定时器，将停止方法写在beforeDestroy函数里面
                        this.$destroy()
                        //即使再调用recover方法，也不会再恢复了，因为Vue实例被销毁了
                    },
                    recover(){
                        console.log('recover')
                        this.opacity = 1
                    }
                },
                //挂载：数据第一次渲染时调用，后面数据再有变化也不会再调用了
                mounted(){
                    console.log('mounted...',this)//这里的this是vue实例
                    //用vm的timer属性接收定时器，便于停止该计时器
                     this.timer = setInterval(() => {
                        vm.opacity -= 0.01
                        if(vm.opacity <= 0){ //不能用===0，因为可能会跳过0，js中0.1+0.2!=0.3
                            vm.opacity = 1
                        }
                    },16)
                },
                beforeDestroy() {
                    clearInterval(this.timer)
                },
            })

        </script>

        
    </body>
</html>